<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';



// 定义 pipelineList 的数据结构
interface Pipeline {
  id: string; // 假设每个管道有唯一标识
  pipeCode: string;
  pipeName: string;
}

// 定义 data 的完整结构
const data = ref<{
  id: string;
  wellCode: string;
  wellName: string;
  status: string;
  location: string;
  depth: string;
  remark: string;
  pipelineList: Pipeline[];
}>({
  id: '',
  wellCode: '',
  wellName: '',
  status: '',
  location: '',
  depth: '',
  remark: '',
  pipelineList: [],
});


const [Modal, modalApi] = useVbenModal({
  showConfirmButton: false,
  onCancel() {
    modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const modalData = modalApi.getData<Record<string, any>>();
      console.log("modalData:", modalData);
      const actualData = modalData.data;
      if (actualData) {
        data.value = { ...data.value, ...actualData };
      }
    }
  },
  title: '油水井详情',
});
</script>
<template>
  <Modal>
    <div v-if="data">
      <!-- 显示指定的参数信息 -->
      <div>
        <p><strong>井ID:</strong> {{ data.id }}</p>
        <p><strong>井编号:</strong> {{ data.wellCode }}</p>
        <p><strong>井名称:</strong> {{ data.wellName }}</p>
        <p><strong>状态:</strong> {{ data.status }}</p>
        <p><strong>坐标:</strong> {{ data.location }}</p>
        <p><strong>井深:</strong> {{ data.depth }}米</p>
        <p><strong>备注:</strong> {{ data.remark }}</p>
      </div>
      <!-- 打印空行 -->
      <br />
      <hr />
      <br />
      <!-- 居中显示 关联管道信息 -->
      <div>
        <p style="text-align: center; background-color: #333232;"><strong>关联管道信息</strong></p>
      </div>
      <!-- 显示pipelineList中的数据中的管线编号，管线名称和一个序号-->
      <div class="pipeline-table">
        <div class="pipeline-header">
          <span class="pipeline-header-item">序号</span>
          <span class="pipeline-header-item">管线编号</span>
          <span class="pipeline-header-item">管线名称</span>
        </div>
        <div v-for="(pipeline, index) in data.pipelineList" :key="pipeline.id" class="pipeline-row">
          <span class="pipeline-item">{{ index + 1 }}.</span>
          <span class="pipeline-item">{{ pipeline.pipeCode }}</span>
          <span class="pipeline-item">{{ pipeline.pipeName }}</span>
        </div>
      </div>

    </div>
  </Modal>
</template>

<style scoped>
/* 这里可以添加一些CSS样式来美化Modal */
p {
  padding: 5px;
  margin: 0;
}

strong {
  margin-right: 10px;
}

.pipeline-table {
  border-collapse: collapse;
  width: 100%;
}

.pipeline-header,
.pipeline-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}

.pipeline-item {
  width: 33.33%;
  text-align: left;
  padding: 5px;
  border-bottom: 1px solid #ddd;
}

.pipeline-header-item {
  width: 33.33%;
  text-align: left;
  padding: 5px;

  border-bottom: 1px solid #ddd;
  color: #ddd;
  /* 设置字体颜色为深灰色 */
  font-weight: bold;
}


.pipeline-header-item {
  font-weight: bold;
}
</style>
